<template>
    <span @click="showModal">
      <slot></slot>
     <!-- center -->
     <el-dialog draggable v-model="config.modalVisible" title="提示" width="500"  align-center destroy-on-close>
        <a-form @finish="onFinish" :colon="false" ref="formRef" :model="data.formData"
            :label-col="{ style: { width: '100px' } }" :wrapper-col="{ span: 24 }">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item name="mmm" :rules="[{ required: true, message: '必填!' }]" label="必填输入框" :maxlength="60">
                  <a-input v-model:value="data.formData.mmm" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item name="aaa" label="输入框">
                  <a-input :rules="[{ required: true, message: '必填!' }]" :disabled="data.computedDislabelFlag"
                    v-model:value="data.formData.aaa" :maxlength="60" />
                </a-form-item>
              </a-col>
  
              <a-col :span="12">
                <a-form-item name="fff" label="下拉框">
                  <a-select :disabled="data.computedDislabelFlag" v-model:value="data.formData.fff" style="width: 100%;"
                    :max-tag-count="2" :field-names="{ label: 'text', value: 'value', options: 'options' }" :options="[
                      { value: 1, text: '1111' }
                    ]">
                  </a-select>
                </a-form-item>
              </a-col>
  
              <a-col :span="12">
                <a-form-item name="ssss" label="日期">
                  <a-date-picker :rules="[{ required: true, message: '必填!' }]" :disabled="data.computedDislabelFlag"
                    style="width:100%" v-model:value="data.formData.ssss" :value-format="config.pickerFormat" />
                </a-form-item>
              </a-col>
  
              <a-col :span="12">
                <a-form-item name="timeArray" label="时间范围">
                  <a-range-picker :show-time="false" :disabled="data.computedDislabelFlag"
                    v-model:value="data.formData.timeArray" @change="onRangePickerChange"
                    :value-format="config.pickerFormat" :allowClear="false" />
                </a-form-item>
              </a-col>
  
              <a-col :span="12">
                <a-form-item :disabled="data.computedDislabelFlag" name="ccc" label="开关">
                  <a-switch v-model:checked="data.formData.ccc" /></a-form-item>
              </a-col>
  
              <a-col :span="12">
                <a-form-item name="ddd" label="单选">
                  <a-radio-group :disabled="data.computedDislabelFlag" v-model:value="data.formData.ddd">
                    <a-radio value="1">Sponsor</a-radio>
                    <a-radio value="2">Venue</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
  
              <a-col :span="12">
                <a-form-item name="eee" label="多选">
                  <a-checkbox-group :disabled="data.computedDislabelFlag" v-model:value="data.formData.eee">
                    <a-checkbox value="1" name="type">Online</a-checkbox>
                    <a-checkbox value="2" name="type">Promotion</a-checkbox>
                    <a-checkbox value="3" name="type">Offline</a-checkbox>
                  </a-checkbox-group>
                </a-form-item>
              </a-col>
  
              <a-col :span="24" style="text-align: right">
                <a-form-item>
                  <a-button v-if="!data.computedDislabelFlag" type="primary" html-type="submit"
                    @click="onSubmit">确认</a-button>
                  <a-button style="margin-left: 10px" @click="cancal">取消</a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleCancel">取消</el-button>
                    <el-button type="primary" @click="handleOk">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>

    </span>
  </template>
  <script setup>
    import { ref, reactive, toRefs, watchEffect ,computed, watch,onUpdated,onBeforeUpdate,onBeforeMount,onMounted} from "vue";
  const config = reactive({
    editUrl: "/aaaaaa",
    addUrl: "/bbbbbbb",
    startName: "",//开始时间字段
    endName: "",// 结束时间字段
    modalVisible: true,
    pickerFormat: 'YYYY-MM-DD'// 'YYYY-MM-DD HH:mm:ss';
  })
  
  const data = reactive({
    formData: {
      ssss: dayjs(new Date()).format(config.pickerFormat),
      timeArray: [],
      ccc: false,
      eee: [],
      fff: [],
    },
    computedUrl: computed(() => {
      if (props.type == "edit") {
        return config.editUrl;
      } else if (props.type == "add") {
        return config.addUrl;
      }
    }),
    computedDislabelFlag: computed(() => { return (props.type == "detail"); }),
    computedEditFlag: computed(() => { return props.type == "edit"; }),
    computedDialogTitle: computed(() => {
      var title = "";
      if (props.type == "add") { title = "新增"; }
      else if (props.type == "edit") { title = "编辑"; }
      else if (props.type == "detail") { title = "详情"; }
      return title;
    })
  });
  
  const props = defineProps({
    data: {
      type: Object,
      default: function () {return {}}
    },
    type: {
      type: String,
      default: "add",//  add  |   edit  |  detail
    },
  });
  
  const showModal = () => {
    config.modalVisible = true;
  };
  
  const handleOk = (e) => {
    config.modalVisible = false;
  };
  
  const handleCancel = (e) => {
    config.modalVisible = false;
  }
  
  // 时间格式特殊时的处理
  const onRangePickerChange = (dates, dateStrings) => { }
  
  // props单个监听
  watch(() => props.data, (newValue, oldValue) => {
    // console.log(newValue);
    if (Object.keys(newValue).length) {
      console.info("弹框有数据源传入")
      data.formData = klcs.deepClone(true, {}, newValue);
    }
  },
    { deep: true, immediate: true }
  );
  
  const formRef = ref();
  const emit = defineEmits(["sure", 'update:text']);
  const onSubmit = async () => {
    var flag = await formRef.value.validate();
    if (!flag) {
      return;
    }
  
    var params = {
      ...data.formData,
      [config.startName]: data.formData.timeArray[0],
      [config.endName]: data.formData.timeArray[1],
    };
  
    console.log('submit!', data.formData);
    ajax.post({ url: data.computedUrl, params: params })
      .then((response) => {
        emit("sure"); // 事件触发
        message.success("成功！");
        handleOk();
      });
  };
  
  // 这个代表校验通过.
  const onFinish = (values) => { console.log('Success:', values); };
  const cancal = function () { emit("sure"); handleCancel(); }// 事件触发
  const resetForm = () => { formRef.value.resetFields(); };// 重置表单
  </script>